<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getByIdService } from '../../api/goods.js'
	import { addOrderService } from '../../api/order.js'
	import { useUserStore } from '../../store/idnex.js'
	import waterMarker from "../../components/sdq-watermarker/waterMarker.vue"
	import { getWatermar } from '../../api/login.js'
		
		const watermarText = ref('')
		const isHide = ref(false)
		
		
		getWatermar().then(res => {
			if(!res.data.hide){
				watermarText.value = res.data.text
				isHide.value = true
			}
		})
	
	const user = useUserStore().user
	
	const goods = ref({})
	const id = ref('')
	onLoad( async (options) => {
		id.value = options.id
		const res = await getByIdService(options.id)
		goods.value = res.data
	})
	
	const remark = ref('')
	
	// 选择支付方式
	const isSelectPay = ref(false)
	import wxpay from '../../static/images/wxpay.jpg'
	import zfbpay from '../../static/images/zfbpay.jpg'
	
	const SelectPaydialog = ref(null)
	const openSelectPay = () => {
		SelectPaydialog.value.open()
	}
	
	const showPayImg = ref(wxpay)
	
	const payMethod = async (type) => {
		if(type === 'wx'){
			showPayImg.value = wxpay
		}else {
			showPayImg.value = zfbpay
		}
		isSelectPay.value = true
	}
	
	const payOk = async() => {
		const durationTime = Math.floor(Math.random() * 2001 + 1000);
		uni.showToast({
			title:'正在校验支付...',
			icon:'loading',
			duration:durationTime
		})
		setTimeout(() => {
			uni.showToast({
				title:'支付成功',
			})
			isSelectPay.value = false
			setTimeout(() => {
				handlePlaceOrder()
			}, 500)
		}, durationTime)
	}
	
	// 下单方法
	const handlePlaceOrder = async () => {
		const res = await addOrderService({
			"userId": user.id,
			"goodsId": id.value,
			"remark": remark.value,
			"buyNum": 1
		})
		uni.showToast({
			title:'下单成功'
		})
		uni.switchTab({
			url:'/pages/order/index?action=all'
		})
	}
</script>

<template>
	<view class="container">
		
		<view v-if='isSelectPay' class="pay">
				<uni-card padding="0" spacing="0">
					<image :src="showPayImg" mode=""></image>
					<view class="pay-btn">
						<button @click="payOk">我已支付完成</button>
					</view>
				</uni-card>
		</view>
		

		
		<!-- 提示窗示例 -->
		<uni-popup ref="SelectPaydialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="微信" confirmText="支付宝" title="选择支付" content="请选择支付方式" @close="payMethod('wx')" @confirm="payMethod('zfb')"></uni-popup-dialog>
		</uni-popup>
		
		<waterMarker v-if="isHide" col="4" row="8" :text="watermarText" opacity="0.1" color="black" rotate="-30deg"></waterMarker>
		
		<view class="content">
			<view class="left">
				<image :src="`https://images.weserv.nl/?url=${goods.images}`" mode="scaleToFill"></image>
			</view>
			<view class="right">
				<view class="right-item">
					<text style="font-weight: 600;">{{ goods.goodName }}</text>
				</view>
				<view class="right-item">
				<text style="font-size: 28rpx; color: red;">7天无理由退回，全程价保</text>
				</view>
				<view class="right-item">
				<text style="font-size: 28rpx;">付款后，48小时发货</text>
				</view>
				<view class="right-item">
				<text style="font-size: 28rpx; color: red;">￥{{ goods.price }}</text>
				<text style="font-size: 28rpx;">X 1</text>
				</view>
				
			</view>
		</view>
			<view class="divider"/>
			<view class="low-text">
				<text>运费</text>
				<text>￥ 0.00</text>
			</view>
			<view class="divider"/>
			<view class="low-text">
				<text>买家留言</text>
				<view><uni-easyinput v-model="remark" placeholder="请输入留言"></uni-easyinput></view>
			</view>
			<view class="divider"/>
			<view class="low-text">
				<text></text>
				<text>共1件 小计：{{ goods.price }}</text>
			</view>
	</view>
	
	<view class="bottom-region">
		<text style="margin-left: 18rpx; font-size:40rpx;">合计：<text style="color: red;">{{ goods.price }}</text></text>
		<button :disabled="isSelectPay" @click="openSelectPay">立即下单</button>
	</view>
</template>

<style scoped lang="scss">
	
	.pay {
		position: absolute;
		z-index: 99;
		width: 100%;
		height: 70vh;
		left: 0;
		image {
			width: 100%;
			height: 60vh;
		}
		button{
			border-radius: 10rpx;
		}
	}
	
	
	.bottom-region {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: white;
		
		button {
			margin-top: 10rpx;
			border-radius: 20rpx;
			background-color: red;
			color: white;
			text-align: center;
			width: 60%;
			height: 80%;
		}
		
	}
	
	.low-text {
		margin: 10rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.divider{
		margin-top: 30rpx;
		 background: #E0E3DA;
		 width: 100%;
		 height: 5rpx;
		}
	
	
	.content {
		display: flex;
		width: 100%;
		height: 230rpx;
		.right {
			margin-left: 15rpx;
			.right-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 18rpx;
			}
		}
		.left {
			width: 40%;
			height: 100%;
			image {
				height: 100%;
				width: 100%;
			}
		}
	}
	
	.container {
		padding: 20rpx;
	}
	
</style>
